<!-- @format -->

<template>
  <div id="Home">
    <div class="titleImg">
      <img :src="titleIMG" alt="" />
      <img :src="logo" alt="" class="logo" />
      <img :src="search" alt="" class="search" @click="aaa" />
    </div>
    <div class="banner">
      <img :src="titbanner" alt="" />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.src" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 排行榜 -->
    <div class="ranking">
      <van-tabs v-model="active">
        <van-tab
          v-for="(item, index) in rankings"
          :key="index"
          :title="item.name"
          title-style="width:36%;height:.7rem;
          padding：0px;
          font-size:.32rem;
          margin-left:10px
          "
        >
          <div
            class="rankingPages"
            v-for="(att, inde) in item.list"
            :key="inde"
          >
            <div class="rankingPage">
              <img
                :src="att.image.src"
                alt=""
                @click="getShopId(att.link.id)"
              />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 加购商品 -->
    <div class="Purchase">
      <div class="paurchase-title" @click="getShopId(PurchasetitleId)">
        <img :src="Purchasetitle" alt="" />
      </div>
      <div class="paurchase-page">
        <div
          class="paurchase-one"
          v-for="(item, index) in newPurchaseList"
          :key="index"
          @click="getShopId(item.link.id)"
        >
          <div class="paurchaseimg">
            <img :src="item.image.src" alt="" />
          </div>
          <div class="paurchaseh6">{{ item.name }}</div>
          <p>{{ item.price }}</p>
          <div class="paurchase-oneshop">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 商品展示 -->
    <div
      class="productShops"
      v-for="(item, index) in newproductList"
      :key="index"
    >
      <div class="productShop">
        <div class="productShopTitle">
          <img :src="item.back.src" alt="" />
        </div>

        <div class="productShopsDown">
          <div class="productShopPages">
            <div
              class="productShopPage"
              v-for="(arr, i) in item.list"
              :key="i"
              @click="getShopId(arr.link.id)"
            >
              <div class="proimg">
                <img :src="arr.image.src" alt="" />
              </div>
              <p>{{ arr.name }}</p>
              <p style="color:red">{{ arr.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pageFoot">
      <div class="pageFoottit">
        <img :src="pageFootTitle" alt="" />
      </div>
      <div class="pageFootList">
        <div class="footpa" v-for="(item, index) in pageFootlist" :key="index">
          <div class="zza" :style="{ background: item.color.value }">
            <img :src="item.image.src" alt="" />
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { tok } from "../../main";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      logo:
        "https://pic.flyco.net.cn/mall/sys/partner/20210112/logo-wap_1610433447635.png",
      search:
        "https://flycopic.oss-cn-hangzhou.aliyuncs.com/flycoimg/search.png",
      listPage: [],
      titleIMG: "",
      titbanner: "",
      banner: [],
      rankings: [],
      active: 0,
      rankingPage: [],
      Purchasetitle: "",
      PurchasetitleId: "",
      PurchaseList: [],
      productList: [],
      pageFootTitle: "",
      pageFootlist: []
    };
  },
  computed: {
    newPurchaseList() {
      this.PurchaseList.forEach(e => {
        if (e.link.id != 1) {
          e.price = this.listPage[e.link.id].promotionPrice;
          e.name = this.listPage[e.link.id].name;
          e.img = "https://m.flyco.com//aliyun/images/home/cart.png";
        }
      });
      return this.PurchaseList;
    },
    // 商品展示
    newproductList() {
      this.productList.forEach(e => {
        if (e.list) {
          // console.log(e.list);
          for (let i = 0; i < e.list.length; i++) {
            if (e.list[i].link.id && /\D/.test(e.list[i].link.id) == true) {
              if (this.listPage[e.list[i].link.id]) {
                e.list[i].price = this.listPage[
                  e.list[i].link.id
                ].promotionPrice;
                e.list[i].name = this.listPage[e.list[i].link.id].name;
              } else {
                e.list.splice(i, 1);
                i--;
              }
            }
          }
        }
        // e.
      });
      return this.productList;
    }
  },
  watch: {},
  async created() {
    await this.toks();
    axios.get("/api/b2c/cms/contentV1/0-0/page/wap/cmsV1?url=/").then(res => {
      const ps = JSON.parse(res.data.data.content);
      const p = ps.blocks;
      this.titleIMG = p[0].list[0].src;
      this.titbanner = p[1].list[0].src;
      this.banner = p[2].list;
      this.rankings = p[3].list;
      this.PurchaseList = p[4].list;
      this.Purchasetitle = p[4].back.src;
      this.PurchasetitleId = p[4].back.link.id;
      this.productList = p.splice(5, 5);
      this.pageFootTitle = p[5].list[0].src;
      this.pageFootlist = p[6].list;
      // console.log(JSON.parse(JSON.stringify(ps)));
    });
  },

  methods: {
    async toks() {
      const res = await tok();
      this.listPage = res.data.data.wapGoods;
    },
    getShopId(id) {
      if (id && /\D/.test(id) == true) {
        this.$router.push({
          name: "Products",
          query: {
            productSn: id
          }
        });
      } else {
        this.$router.push({
          name: "Class"
        });
      }
    },
    aaa() {
      this.$router.replace("/finds");
    }
  }
};
</script>
<style scoped lang="scss">
@import "@sass/Home/Home.scss";
</style>
